<template>
	<view class="aaa">
		<view class="livelist">
			<dl v-for="(item,index) in list" @click='tiaolive(item.roomid)'>
				<dt><img :src="item.feeds_img" alt=""></dt>
				<dd class='time'>开播:{{happenTimeFun(item.start_time)}}
					-{{new Date(item.end_time).toLocaleDateString().replace(/\//g,'-')+''+
				new Date(item.end_time).toTimeString().substr(0,8)
				}}</dd>
				<dd>{{item.anchor_name}}</dd>
				<dd><span class='nameimg'>主播</span><span>{{item.name}}</span></dd>
			</dl>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			}
		},
		methods: {
			happenTimeFun(num) { //时间戳数据处理
				let date = new Date(num);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
			},
			async getlive() {
				const that = this
				let res = await uni.request({
					url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wxe5f62bc262ee9106&secret=f991ca777a28854b40e83c513be97bd3',
					method: 'GET',
				 success(res) {
						uni.request({
							url: `https://api.weixin.qq.com/wxa/business/getliveinfo?access_token=${res.data.access_token}`,
							method: 'POST',
							data: {
								start: 0,
				 			limit: 10,
							},
							success(res) {
								that.list = res.data.room_info
							}
						})
					}
				})
			},
			tiaolive(roomid) {
				let customParams = encodeURIComponent(JSON.stringify({
					path: 'pages/index/index',
					pid: 1
				})) // 开发者在直播间页面路径上携带自定义参数（如示例中的 path 和pid参数），后续可以在分享卡片链接和跳转至商详页时获取，详见【获取自定义参数】、【直播间到商详页面携带参数】章节（上限600个字符，超过部分会被截断）
				wx.navigateTo({
					url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomid}&custom_params=${customParams}`
				})
			}

		},
		mounted() {
			this.getlive()
		}
	}
</script>

<style scoped>
	.livelist {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;

	}

	.nameimg {
		display: inline-block;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		font-size: 12px;
		background-color: #fffae8;
		text-align: center;
		line-height: 30px;
		color: #ffe0b4;

	}

	dl {
		width: 45%;
		height: 250px;

	}

	dl dd {
		margin-top: 5px;
	}

	dl img {
		width: 100%;
		height: 150px;
	}

	.time {
		font-size: 8px;
		color: #ccc;
	}
</style>
